import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {connect} from 'react-redux'
import {View, Block} from '@tarojs/components'
import {AtIcon} from 'taro-ui'
import {CityLocation, DistributorOrder} from '../../utils/server.interface'
import {SUPPLIER_STORE_LIST} from '../../constants/api'
import {vcmonitor} from "../../utils/tools";
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {http} from "../../utils/http";
import {lxH5Wx} from "../../utils/lx.h5.service";
import './list.scss'

type PageStateProps = {
  location: CityLocation
}
type PageDispatchProps = {}
type PageOwnProps = {}
type PageState = {
  tabIndex: number
  loadMoreStatus: "more" | "loading" | "noMore"
  orderList: DistributorOrder[]
  searchKey: string
  searchBarTop: number
  shopList: any
  supplier_id: any
}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface List {
  props: IProps
}

@connect(({location}) => ({
  location
}), (dispatch) => ({}))


class Order extends Component {
  state: PageState = {
    tabIndex: 0,
    loadMoreStatus: 'loading',
    orderList: [],
    searchKey: '',
    searchBarTop: 0,
    shopList: [],
    supplier_id: ''
  }
  page = 1

  async UNSAFE_componentWillMount() {
    vcmonitor(this)
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
  }

  async componentDidShow() {
    const {goodsId, category} = Taro.getCurrentInstance().router.params
    await this.initSupplierStore(goodsId, category)
  }

  async initSupplierStore(goods_id, category) {
    const res = await http.HPost(SUPPLIER_STORE_LIST, {goods_id, category})
    if (res) {
      this.setState({
        shopList: res.data.list
      })
    }
  }

  async navigateOut(_latitude, _longitude, address = '', name='') {
    lxH5Wx.navigation(Number(_latitude), Number(_longitude), address, name)
  }

  makePhone(value) {
    try {
      Taro.makePhoneCall({
        phoneNumber: value
      })
    } catch (e) {
      Taro.showToast({title: '拨打电话失败', icon: 'none'})
    }
  }

  previewImages(list) {
    const lists = []
    list.map(item => lists.push(item.url))
    Taro.previewImage({
      current: lists[0].url,
      urls: lists
    })
  }

  render() {
    const {shopList} = this.state
    return (
      <View className='meals-list-root'>
        <GzhAuth />
        {!!shopList && shopList.map((item, i) =>
          <Block key={i} key={i}>
            <View className='shop-root'>
              <View>
                <View onClick={this.navigateOut.bind(this, item.latitude, item.longitude, item.address || "", item.name)}
                  className='title'
                >
                  {item.name}
                </View>
                <View className='add'>
                  {item.business_time_start && <View style='margin-bottom: 4px;'>营业时间 {item.business_time_start}{item.business_time_end ? '-' + item.business_time_end : ''}</View>}
                  <View onClick={this.navigateOut.bind(this, item.latitude, item.longitude, item.address || "", item.name)}
                    style='margin-right:20px'
                  >{item.address}</View>
                  {item.qualifications_imgs_list && item.qualifications_imgs_list.length > 0 && <View className='merchant-qualification' onClick={this.previewImages.bind(this, item.qualifications_imgs_list)}>
                  查看商家资质
                </View>}
                </View>
              </View>
              <View><AtIcon onClick={this.makePhone.bind(this, item.phone)} value='icon icon-dianhua-01' size='22' color='#000' /></View>
            </View>
            {i !== shopList.length - 1 && <View className='line' />}
          </Block>
        )}
      </View>
    )
  }
}

export default Order as ComponentClass<PageOwnProps, PageState>
